<template>
    <el-card shadow="hover" :body-style="{ padding: '0' }">
      <template #header>
         <div class="flex justify-between">
            <div>
              <el-button size="small" type="success" :icon="CirclePlus">新增图片分类</el-button>
              <el-button size="small" type="danger" :icon="Upload">上传图片</el-button>
            </div>
            <div>
              <el-input v-model="keyword" class="w-50 m-2" size="small" placeholder="请输入搜索关键词" :suffix-icon="Search" />
              <el-button size="small" type="success" :icon="Search">搜索</el-button>
            </div>
          </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="3" :offset="0">
           <aside class="el-aside relative" style="--el-aside-width:280px;"><div class="image-aside flex flex-col" data-v-0c8bd1ac=""><div class="flex-1" id="list-table" data-v-0c8bd1ac="" style="overflow-y: auto;"><div class="aside-list active" data-v-0c8bd1ac=""><span class="truncate" title="运动旅行" data-v-0c8bd1ac="">运动旅行</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="居家生活" data-v-0c8bd1ac="">居家生活</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="手机数码" data-v-0c8bd1ac="">手机数码</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="智能家电" data-v-0c8bd1ac="">智能家电</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="个护清洁" data-v-0c8bd1ac="">个护清洁</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="化妆品" data-v-0c8bd1ac="">化妆品</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="健身器材" data-v-0c8bd1ac="">健身器材</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="电视机" data-v-0c8bd1ac="">电视机</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="笔记本" data-v-0c8bd1ac="">笔记本</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div><div class="aside-list" data-v-0c8bd1ac=""><span class="truncate" title="电脑" data-v-0c8bd1ac="">电脑</span><button class="el-button el-button--text el-button--small ml-auto" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"></path><path fill="currentColor" d="M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"></path></svg></i></span></button><button class="el-button el-button--text el-button--small el-tooltip__trigger" type="button" data-v-0c8bd1ac=""><!--v-if--><span class=""><i class="el-icon" data-v-0c8bd1ac="" style="font-size: 16px;"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-0c8bd1ac=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></span></button></div></div><div class="flex items-center justify-center" data-v-0c8bd1ac="" style="height: 50px;"><div role="pagination" aria-label="pagination" class="el-pagination is-background" data-v-0c8bd1ac=""><button type="button" class="btn-prev is-first" disabled="" aria-disabled="true"><i class="el-icon"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg></i></button><button type="button" class="btn-next is-last" aria-disabled="false"><i class="el-icon"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg></i></button></div></div></div><div class="el-overlay" style="z-index: 2016; display: none;"><div aria-modal="true" aria-labelledby="el-drawer__title" aria-label="新增" class="el-drawer rtl" role="dialog" style="width: 45%;"><header id="el-drawer__title" class="el-drawer__header"><span role="heading" title="新增">新增</span><button aria-label="close 新增" class="el-drawer__close-btn" type="button"><i class="el-icon el-drawer__close"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg></i></button></header><!--v-if--><!--v-if--></div></div></aside>
        </el-col>
        <el-col :span="21" :offset="0">
          <div class="demo-image__placeholder">
            <div class="block" v-for="(item,index) in 10">
              <el-image :src="src"  :preview-src-list="srcList" :initial-index="4"  fit="cover" z-index="101">
                <template #viewer>
                    <span>我是图片名称</span>
                </template>
              </el-image>
              <div class="image-title" data-v-c347ba86="">public/6291c5166b58f.png</div>
              <el-button  type="primary" size="small" :link="true" icon="Edit">重命名</el-button>
              <el-button  type="danger" size="small" :link="true" icon="Delete">删除</el-button>
            </div>
            <el-pagination class="justify-center mt-5 mb-5" background layout="prev, pager, next" :total="1000" />
          </div>
        </el-col>
      </el-row>
    </el-card>
</template>

<script  setup>
const src = 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
</script>

<style scoped>
.el-aside{height: 100;}
.demo-image__placeholder .block {
  padding: 0 0 10px;
  text-align: center;
  border: solid 1px var(--el-border-color);
  display: inline-block;
  width: calc(20% - 30px);
  box-sizing: border-box;
  vertical-align: top;
  position: relative;
  margin: 15px;
}
.demo-image__placeholder .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-top: 10px;
}
.demo-image__placeholder .el-image {
  max-width: 100%;
  max-height: 200px;
}

.demo-image__placeholder.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
.demo-image__placeholder .dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}

.image-title {
    --tw-bg-opacity: 1;
    background-color: rgba(31,41,55,var(--tw-bg-opacity));
    --tw-bg-opacity: .5;
    font-size: .875rem;
    line-height: 1.25rem;
    padding: 0.25rem 0.5rem;
    position: absolute;
    --tw-text-opacity: 1;
    color: rgba(243,244,246,var(--tw-text-opacity));
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    bottom: 41px;
    left: -1px;
    right: -1px;
}

.aside-list{
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
    @apply flex items-center p-3 text-sm text-gray-600;
}
.aside-list:hover,.active{
    @apply bg-blue-50;
}


.image-main{
  position: relative;
}
.image-main .top{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}
.image-main .bottom{
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}

.image-aside{
  position: absolute;
  border-right: 1px solid #eee;
  height: auto;
  width: 280px;
}

</style>